<template>
    <ul class="tabs-dropdown-menu" :class="[show?'':'tabs-mouse-right-menu-hidden']"
        :style="{left:offsetLeft+'px'}">
        <li @click="onCloseCurrentClick">关闭当前</li>
        <li @click="onCloseOtherClick">关闭其他</li>
        <li @click="onCloseAllClick">关闭所有</li>
    </ul>
</template>

<script>
    export default {
        name: "TabsContextMenu",
        props:
            {
                offsetLeft: {type: String, default: '220'},
                index: {type: String, default: '0'}
            },
        data() {
            return {
                show: false,
            }
        },
        created() {
            //失去焦点 隐藏
            document.addEventListener('click', (e) => {
                // console.log(this.$el.contains(e.target));
                if (!this.$el.contains(e.target)) {
                    this.show = false;
                }
            })
        },
        methods: {
            onCloseCurrentClick() {
                if (this.index.trim().length > 0 && this.index !== '0') {
                    this.$parent.tabClose(this.index)
                }
                this.show = false;
            },
            onCloseOtherClick() {
                if (this.index.trim().length > 0 && this.index !== '0') {
                    this.$parent.tabCloseOther(this.index)
                }
                this.show = false;
            },
            onCloseAllClick() {
                this.$parent.tabCloseAll()
                this.show = false;
            },
        }
    }
</script>

<style scoped>
    .tabs-mouse-right-menu-hidden {
        display: none;
    }

    .tabs-dropdown-menu {
        width: 120px;
        position: absolute;
        z-index: 999;
        top: 30px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: white;
        padding: 6px 0;
        font-size: 14px;
    }

    .tabs-dropdown-menu li {
        list-style: none;
        margin: 1px 0;
        padding: 0 15px;
        height: 25px;
        background-color: white;
        line-height: 25px;
        color: #606266;
    }

    .tabs-dropdown-menu li:hover {
        background-color: #ecf5ff;
        color: #66b1ff;
        cursor: pointer;
    }
</style>
